<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="system"></ion-back-button>
    </ion-buttons>
    <ion-title>SSH Keys</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding-top with-widgets">
  <ion-item-group>
    <!-- always -->
    <ion-item>
      <ion-label>
        <h2>
          Adding SSH keys to StartOS is useful for command line access, as well
          as for debugging purposes.
          <a [href]="docsUrl" target="_blank" rel="noreferrer">
            View instructions
          </a>
        </h2>
      </ion-label>
    </ion-item>

    <ion-item-divider>Saved Keys</ion-item-divider>

    <ion-item button detail="false" (click)="presentModalAdd()">
      <ion-icon slot="start" name="add" color="dark"></ion-icon>
      <ion-label>
        <b>Add New Key</b>
      </ion-label>
    </ion-item>

    <!-- loading  -->
    <ng-container *ngIf="loading">
      <ion-item *ngFor="let entry of ['', '']">
        <ion-avatar slot="start" style="margin-right: 30px">
          <ion-skeleton-text
            animated
            style="width: 30px; height: 30px; border-radius: 0"
          ></ion-skeleton-text>
        </ion-avatar>
        <ion-label>
          <ion-skeleton-text
            animated
            style="width: 100px; height: 20px; margin-bottom: 12px"
          ></ion-skeleton-text>
          <ion-skeleton-text
            animated
            style="width: 150px; margin-bottom: 18px"
          ></ion-skeleton-text>
          <ion-skeleton-text animated style="width: 300px"></ion-skeleton-text>
        </ion-label>
        <ion-button slot="end" fill="clear">
          <ion-skeleton-text
            animated
            style="width: 60px; border-radius: 0"
          ></ion-skeleton-text>
        </ion-button>
      </ion-item>
    </ng-container>

    <!-- not loading -->
    <ng-container *ngIf="!loading">
      <ion-item *ngFor="let ssh of sshKeys; let i = index">
        <ion-icon slot="start" name="key-outline" size="large"></ion-icon>
        <ion-label>
          <h1>{{ ssh.hostname }}</h1>
          <h2>{{ ssh['created-at'] | date: 'medium' }}</h2>
          <p>{{ ssh.alg }} {{ ssh.fingerprint }}</p>
        </ion-label>
        <ion-button
          slot="end"
          fill="clear"
          color="danger"
          (click)="presentAlertDelete(i)"
        >
          <ion-icon slot="start" name="close"></ion-icon>
          Remove
        </ion-button>
      </ion-item>
    </ng-container>
  </ion-item-group>
</ion-content>
